/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    ScrollView,
} from 'react-native';


//引入定时器
var timerMixin = require('react-timer-mixin');

//引入json数据
var ImageData = require('./ScrollImageData.json');

//屏幕大小
var Dimensions = require('Dimensions');
var {width} = Dimensions.get('window');


var scrollView = React.createClass({//类名一定要大写开头
    //注册定时器
    mixins:[timerMixin],


    //不可改变的值
    getDefaultProps(){//设置默认属性
        return{
            title:'test',
            time:1000
        }
    },

    propTypes:{
        title : React.PropTypes.string
    },//属性校验器,表示必须是字符串

    //可改变的值
    getInitialState(){
        return{
            currentPage: 0
        }
    },

    componentWillMount(){

    },

    //渲染视图
    render() {
        return (
            //<ScrollView>
            //    {/*调用创建view的方法*/}
            //    {this.renderChildView()}
            //</ScrollView>
            <View style={styles.content}>
                <ScrollView
                    ref="scrollView"
                    horizontal={true}
                    showsHorizontalScrollIndicator={false}
                    pagingEnabled={true}
                    onMomentumScrollEnd={(e)=>this.onAnimationEnd(e)}
                    onScrollBeginDrag={this.onScrollBeginDrag}
                    onScrollEndDrag={this.onScrollEndDrag}
                >
                    {this.renderAllImage()}
                </ScrollView>
                {/*指示器*/}
                <View style={styles.pageViewStyle}>
                    {/*五个圆点*/}
                    {this.renderPageControl()}
                </View>
            </View>
        );
    },

    //一般在此方法中请求数据或实现复杂操作
    componentDidMount(){
        //开启定时器
        this.startTimer();
    },

    startTimer(){
        //拿到scrollView
        var scrollView = this.refs.scrollView;
        var imageCount = ImageData.data.length;

        //添加定时器
        this.timer = this.setInterval(function () {
            //设置圆点
            var activePage = 0;
            if ((this.state.currentPage+1) >= imageCount){
                activePage = 0;
            }else{
                activePage = this.state.currentPage+1;
            }

            this.setState({
                currentPage:activePage
            });

            //让scrollView滚动起来
            var offsetX = activePage * width;
            scrollView.scrollResponderScrollTo({x:offsetX, y:0, animated:true});

        }, this.props.time);
    },

    //创建五个视图
    renderChildView(){
        //数组
        var allChild = [];
        var colors = ['red','green','blue','yellow','gray'];
        //遍历
        for (var i = 0; i < 5; i++){
            allChild.push(
                //这里的key主要是用来作为唯一的标识
                <View key={i} style={{backgroundColor:colors[i], width:320, height:200}}>
                    <Text>{i}</Text>
                </View>
            );
        }
        //返回
        return allChild;
    },

    //返回
    renderAllImage(){
        //数组
        var allImage = [];
        var imageArr = ImageData.data;

        for (var i = 0; i < imageArr.length; i ++) {
            var imageItem = imageArr[i];
            allImage.push(
                <Image key={i} source={{uri:imageItem.img}} style={{width:width, height:120}}>
                </Image>
            );
        }
        return allImage;
    },

    renderPageControl(){
        var controlArr = [];
        var imageArr = ImageData.data;
        var style;


        for (var i = 0; i < imageArr.length; i ++) {

            //判断
            style = (i == this.state.currentPage) ? {color:'orange'} : {color:'white'}

            controlArr.push(
                <Text key={i} style={[{fontSize:25},style]}>&bull;</Text>
            );
        }
        return controlArr;
    },

    onAnimationEnd(e){
        //求出水平方向偏移量
        var offSetX = e.nativeEvent.contentOffset.x;

        //求出当前页数
        var currentPage = Math.floor(offSetX/width);

        //更新状态机,重新绘制UI
        this.setState({
           //当前页码
            currentPage:currentPage
        });
    },
    onScrollBeginDrag(){
        this.clearInterval(this.timer);
    },
    onScrollEndDrag(){
        this.startTimer();
    }
})

const styles = StyleSheet.create({
    content:{
        marginTop:25,
    },
    pageViewStyle:{
        width:width,
        height:25,
        backgroundColor:'rgba(0, 0, 0, 0.4)',

        //定位
        position:'absolute',
        bottom:0,

        flexDirection:'row',
        alignItems:'center',
    }
});

//输出类
module.exports = scrollView;
